<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-04-12 14:33:41
 * @Description: 
 * @FilePath: /web/src/views/system/policy/detail.vue
 *  
-->
<template>
  <div class="app-container">
    <div class="page-detail">
      <el-form :model="state.form" label-width="120px">
        <el-form-item :label="$t('policy.table.policyName')">
          <el-input v-model="state.form.name" />
        </el-form-item>

        <el-form-item :label="$t('policy.table.description')">
          <el-input v-model="state.form.description" />
        </el-form-item>

        <el-form-item :label="$t('policy.table.flag')">
          <el-input v-model="state.form.perms" />
        </el-form-item>

        <el-form-item :label="$t('sysDictInfo.search.type')">
          <el-radio-group v-model="state.form.type">
            <el-radio-button label="1"> {{ $t("policy.detail.menu") }}</el-radio-button>
            <el-radio-button label="2"> {{ $t("policy.detail.page") }}</el-radio-button>
            <el-radio-button label="3"> {{ $t("policy.detail.button") }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="state.form.type == '2'" :label="$t('policy.table.URL')">
          <el-input v-model="state.form.url" />
        </el-form-item>

        <el-form-item :label="$t('policy.table.order')">
          <el-input v-model="state.form.orderNum" />
        </el-form-item>

        <el-form-item :label="$t('policy.table.icon')">
          <!-- <el-input v-model="state.form.icon" /> -->
          <el-icon :size="20" class="el-svg-icon">
            <component :is="ElSvg[state.form.icon]" />
          </el-icon>
          <el-button style="margin-left: 10px ;height:20px;width:60px" type="primary" size="small"
            @click="state.dialogVisible = true">
            {{ $t("policy.detail.chooseIcon") }}
          </el-button>
        </el-form-item>

        <el-dialog v-model="state.dialogVisible" class="page-detail" align-center draggable
          :title="$t('policy.detial.chooseIcon')" width="60%" destroy-on-close>
          <el-radio-group v-model="state.form.icon" @change="state.dialogVisible = false">
            <el-radio v-for="item in ElSvg" :key="item" :label="item.name" size="large" border>
              <template #default>
                <el-icon class="el-svg-icon">
                  <component :is="item" />
                </el-icon>
              </template>
            </el-radio>
          </el-radio-group>
        </el-dialog>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('common.button.save') }}</el-button>
          <el-button @click="onCancel">{{ $t('common.button.back') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { create, select, selectOne, update } from './api/base-policy'
import * as ElSvg from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()

const { proxy }: any = getCurrentInstance()
const state = reactive({
  dialogVisible: false,
  form: {
    id: '',
    name: '',
    description: '',
    url: '',
    perms: '',
    parentId: '',
    type: '',
    orderNum: '',
    icon: '',
    status: '',
    createBy: '',
    modifyBy: '',
    gmtCreate: '',
    gmtmodify: ''
  },

})

const onCancel = () => {
  router.back()
}

const onSubmit = async () => {
  if (route.params.id) {
    if (window.location.hash.includes("children")) {
      state.form.parentId = route.params.id
      const data = await create(state.form)
    } else {
      const data = await update(state.form)
    }
    proxy.$message({ message: proxy.$t('common.message.editSuccessfully'), type: 'success' })
  } else {
    state.form.parentId = '0'
    const data = await create(state.form)
    proxy.$message({ message: proxy.$t('common.message.saveSuccessfully'), type: 'success' })
    state.form.id = ''
    state.form.name = ''
    state.form.description = ''
    state.form.url = ''
    state.form.perms = ''
    state.form.parentId = ''
    state.form.type = ''
    state.form.orderNum = ''
    state.form.icon = ''
    state.form.status = ''
    state.form.createBy = ''
    state.form.modifyBy = ''
    state.form.gmtCreate = ''
    state.form.gmtmodify = ''
  }
  router.back()
}

const onSelectOne = async (id: string) => {
  const data = await selectOne(id)
  state.form = { ...data.data }
  state.form.type = String(state.form.type)
}

const onSelect = async () => {
  const data = await select({ pageNum: 1, pageSize: 10000 })
}

onMounted(() => {

  if (!window.location.hash.includes("children")) {

    onSelect()
    route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
  }

})
</script>
<style scoped lang="scss"></style>
